<template>
  <div class="main">
    <div class="title">部门管理</div>
    <div class="headerInput">
      <a-form layout="inline" style="width:100%">
        <a-form-item label="Find" class="searchInputBox">
          <a-input placeholder v-model.trim="searchText" allowClear />
        </a-form-item>
        <a-form-item class="ml300">
          <a-button type="primary" @click="search">Search</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="add">Add</a-button>
        </a-form-item>
      </a-form>
    </div>

    <div></div>
    <div class="tableSection">
      <a-table :data-source="tableData" :customRow="clickKindTable" :pagination="false">
        <a-table-column key="DeptName" title="DeptName" data-index="DeptName" />
        <a-table-column key="Leader" title="Leader" data-index="Leader" />
        <a-table-column key="Phone" title="Phone" data-index="Phone" />
        <a-table-column key="Email" title="Email" data-index="Email" />
        <a-table-column key="Remark" title="Remark" data-index="Remark" />
        <a-table-column key="CreateTime" title="CreateTime" data-index="CreateTime" />
        <a-table-column key="action" title="Action">
          <template slot-scope="text, record">
            <span>
              <a-button type="primary" @click="editMoudule(text,record)">Edit</a-button>
              <a-button
                type="primary"
                style="margin-left:50px;"
                @click="delMoudule(text,record)"
              >Delete</a-button>
            </span>
          </template>
        </a-table-column>
      </a-table>

      <a-pagination
        v-model="currentPage"
        show-size-changer
        show-quick-jumper
        :page-size.sync="pageSize"
        :total="totalCount"
        @showSizeChange="changePage"
        @change="changePage"
        class="pagination"
      />
    </div>
    <!-- <div>
      <a-tree
        v-model="checkedKeys"
        checkable
        :auto-expand-parent="autoExpandParent"
        :defaultExpandAll="defaultExpandAll"
        :tree-data="treeData"
        :replace-fields="replaceFields"
        @expand="onExpand"
        @select="onSelect"
      />
    </div>-->
    <!-- 弹窗部分 -->
    <a-modal v-model="modalVisiable" :title="ModalTitle" @ok="handleOk" :maskClosable="true">
      <div>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="DeptName">
            <a-input placeholder v-model.trim="DeptName" allowClear />
          </a-form-item>
          <a-form-item label="Leader">
            <a-input placeholder v-model="Leader" allowClear />
          </a-form-item>
          <a-form-item label="Phone">
            <a-input placeholder v-model.trim="Phone" allowClear />
          </a-form-item>
          <a-form-item label="Email">
            <a-input placeholder v-model.trim="Email" allowClear />
          </a-form-item>
          <a-form-item label="Remark">
            <a-input placeholder v-model="Remark" allowClear />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      tableData: [],
      doType: '',
      modalVisiable: false,
      pageSize: 10,
      currentPage: 1,
      totalCount: 0,
      DeptId: '',
      DeptName: '',
      Leader: '',
      Phone: '',
      Email: '',
      Remark: '',
      ModalTitle: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      CreateTIme: '',
      autoExpandParent: true,
      defaultExpandAll: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      replaceFields: {
        children: 'sysDept',
        key: 'DeptId',
        title: 'DeptName',
      },
    }
  },
  watch: {
    searchText(){
      this.debounce()
    }
  },
  created() {
    this.getTableData()
    this.getDepartmentTree()
  },
  methods: {
    debounce() {
      setTimeout(() => {
        this.getTableData()
      }, 800)
    },
    // 查询
    getTableData() {
      let data = this.searchText
        ? {
            DeptName: '%' + this.searchText + '%',
            Leader: '%' + this.searchText + '%',
            Phone: '%' + this.searchText + '%',
            Email: '%' + this.searchText + '%',
            Remark: '%' + this.searchText + '%',
          }
        : {}
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        queMode: 'OR',
        limit: this.pageSize,
        orderByList: 'DeptName',

        datas: data,
      }
      this.$post(a).then((result) => {
        this.tableData = result.data.length > 0 ? result.data : []
        this.totalCount = result.count
        this.tableData.map((item) => {
          item.CreateTime = item.CreateTime.replace('T', ' ').split('.')[0]
        })
      })
    },
    addInfo() {
      const a = {
        method: 'SysDept_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          DeptName: this.DeptName,
          Leader: this.Leader,
          Phone: this.Phone,
          Email: this.Email,
          Remark: this.Remark,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getTableData()
        }
      })
    },
    editInfo() {
      const a = {
        method: 'SysDept_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          DeptId: this.DeptId,
          DeptName: this.DeptName,
          Leader: this.Leader,
          Phone: this.Phone,
          Email: this.Email,
          Remark: this.Remark,
        },
      }
      this.$post(a).then((result) => {
        // console.log(result, '修改完成')
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getTableData()
        }
      })
    },

    handleOk() {
      if (!this.DeptName) {
        this.$message.warn('Please enter the DeptName')
        return
      }
      if (this.doType === 'edit') {
        this.editInfo()
      } else if (this.doType === 'add') {
        this.addInfo()
      }
      this.modalVisiable = false
    },
    search() {
      this.currentPage = 1
      this.getTableData()
    },
    add() {
      this.ModalTitle = 'Add Department'
      this.doType = 'add'
      this.DeptId = ''
      this.DeptName = ''
      this.Email = ''
      this.Leader = ''
      this.Phone = ''
      this.Remark = ''
      this.modalVisiable = true
    },
    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    // 编辑模组
    editMoudule(item, index) {
      this.doType = 'edit'
      this.ModalTitle = 'Edit Department'
      this.ModuleTipIndex = index
      console.log('item :>> ', item)
      this.DeptId = item.DeptId
      this.DeptName = item.DeptName
      this.Email = item.Email
      this.Leader = item.Leader
      this.Phone = item.Phone
      this.Remark = item.Remark
      this.modalVisiable = true
    },
    //删除模组
    delMoudule(item, index) {
      // console.log(item, 'del')
      this.doType = 'del'
      const that = this

      const a = {
        method: 'SysDept_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          DeptId: item.DeptId,
        },
      }
      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getTableData()
            }
          })
        },
        onCancel() {},
      })
    },
    changePage(current, pageSize) {
      this.currentPage = current
      this.pageSize = pageSize
      this.getTableData()
    },
    // 查询部门树
    getDepartmentTree() {
      const a = {
        method: 'SysDeptTree_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {},
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          console.log(' treeData:>> ', result.data)
          this.treeData = result.data
        }
      })
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      // this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info)
      console.log('selectedKeys :>> ', selectedKeys)
      this.selectedKeys = selectedKeys
    },
  },
}
</script>

<style lang="less" scoped>
.ml55 {
  margin-left: 76.8px;
}
.main {
}
.headerInput {
  display: flex;
  width: 100%;
  align-items: center;
  .searchInputBox {
    input {
      width: 280px;
    }
  }
  .ml300 {
    margin-left: 180px;
  }
  .ml50 {
    margin-left: 28px;
  }
}
.tableSection {
  margin-top: 30px;
}
.pagination {
  margin-top: 38px;
  position: absolute;
  right: 100px;
}
.mian {
  background: #f0f2f5;
}
</style>